<template>
  <view style="font-size: 14px;" class="cash-main" v-show="pageStatus!=='hide'">
    <public-header bgColor="#28322B" textColor="#fff" title="收银" :isBack="false"></public-header>
    <view class="cash-content">
      <view class="cash-content-left" :class="{disabled:billPopup}">
        <view class="cash-content-left-header">
          <view class="vip-card" v-if="curMemberInfo&&curMemberInfo.id">
            <view class="vip-card-left flex-column">
              <view class="vip-card-left-top">
                <view class="flex align-center">
                  <image src="/static/icons/vip.png" mode="aspectFit" class="vip-icon"></image>
                  <text class="margin-right-xs">{{curMemberInfo.member_name}}</text>
                </view>
                <text>{{curMemberInfo.member_phone||''}}</text>
              </view>
              <view class="vip-card-left-bottom">
                <text>折扣：{{discountText||''}} </text>
                <text>余额：{{curMemberInfo.balance||'0'}} </text>
                <text>积分：{{curMemberInfo.integral||'0'}} </text>
              </view>
            </view>
            <view class="vip-card-right" @click="exitMember">
              <image class="icon" src="/static/icons/exit.png" mode=""></image>
            </view>
          </view>
          <view class="vip-card" v-else @click.stop="showMemberSelectorPopup">
            <view class="vip-card-left">
              <image src="/static/icons/vip.png" mode="aspectFit" class="vip-icon"></image>
              <text>暂无会员</text>
            </view>
            <view class="vip-card-right">
              <text>选择会员</text>
              <text class="cuIcon-right margin-left"></text>
            </view>
          </view>
        </view>
        <view class="flex justify-between padding-lg bg-gray" style="padding: 1rem 2rem;margin-bottom: 2px;"
          v-if="mode==='退货'">
          <text class="text-red text-bold">退货模式</text>
          <text @click="exitRefundMode">取消</text>
        </view>
        <view class="cash-content-left-list">
          <view class="data-empty bg-white" v-if="cart.length===0">
            <u-empty mode="car" icon="/static/images/cart.png" textSize="24" iconSize="120" />
          </view>
          <scroll-view :scroll-y="true" :scroll-into-view="activeGoods" :enable-flex="true"
            :scroll-with-animation="true" class="scroll-view" v-else>
            <view class="cart-item flex align-center" :class="{active:activeGoods===item._id}"
              v-for="(item,index) in orderDetail" :key="item._id" :id="item._id" @click="onSelect(item)">
              <view class="goods-index flex align-start">
                <text class="badge">{{index+1}}</text>
              </view>
              <view class="goods-info flex ">
                <view class="flex justify-between item">
                  <view class="goods-info-name">
                    {{item.goods_name}}
                  </view>
                  <view class="goods-info-number" @click.stop>
                    <u-number-box inputWidth="80" decimalLength="2" :integer="true" :name="item._id"
                      v-model="item.amount" :max="item.goods_stock" @change="changeNumber">
                    </u-number-box>
                  </view>
                </view>
                <view class="flex justify-between item bottom">
                  <text class="flex-1">单价：{{item.sale_price}}</text>
                  <text class="state" v-if="item._discount_type">{{item._discount_type}}</text>
                  <text class="flex-1 text-right">小计：{{getSumPrice(item)}}</text>
                </view>
              </view>
              <view class="delete-icon flex align-center padding" @click.stop="removeGoodsFromCart(item._id)">
                <text class="cuIcon-delete"></text>
              </view>
            </view>
          </scroll-view>
        </view>
        <view class="cash-content-left-footer">
          <view class="sum-item">
            <view class="number">
              <text>{{sumAmount||'0'}}</text>
            </view>
            <view class="label">
              <text>件数</text>
            </view>
          </view>
          <view class="sum-item">
            <view class="number">
              <text>￥{{sumPrice||'0'}}</text>
            </view>
            <view class="label">
              原价
            </view>
          </view>
          <view class="sum-item">
            <view class="number">
              <text>￥{{sumDiscounts||'0'}}</text>
            </view>
            <view class="label">
              <text>优惠</text>
            </view>
          </view>
        </view>
      </view>
      <!-- 结算界面 -->
      <bill-content :refundMode="mode==='退货'" :payWayList="paymentList" :uuid="uuid" :codePayString.sync="codePayString"
        :showWindow.sync="showWindow" :orderNo="orderNo" :remark="remark" :cartInfo="cartInfo" :billData="billData"
        :initPromotion="curPromotion" :initCoupon="curCoupon" v-if="billPopup" @success-pay="successPay"
        @exitMember="exitMember" @setBillResult="setBillResult" @cancel="closeBillPopup"
        @showMemberSelector="showMemberSelectorPopup" @change-cart="changeCartInfo">
      </bill-content>
      <search-goods v-else-if="onSearchView" :cartGoodsAmounts="cartGoodsAmounts" @confirm="add2cart"
        @cancel="changeSearchGoodsView"></search-goods>
      <view class="cash-content-right" v-else>
        <view class="cash-content-right-header">
          <view class="search-view">
            <view class="input-shadow" @click="onInput=false" v-if="onInput===true">
            </view>
            <!-- <view class="bar-code-input-area">
              <view class="input-bar">
                <input type="text" v-model="searchValue" @confirm="add2cart(searchValue)" @focus="onInput=true"
                  @blur="onInput=false">
              </view>
              <image class="bar-code-icon" src="/static/icons/bar-code.png" mode="aspectFit"></image>
            </view> -->
            <view class="bar-code-input-area" :class="{active:onInput===true}" @click="onInput=true">
              <view class="input-bar">
                <text>{{searchValue||''}}</text>
              </view>
              <image class="bar-code-icon" src="/static/icons/bar-code.png" mode="aspectFit"></image>
            </view>
            <view class="right-button" @click="changeSearchGoodsView">
              <text class="cuIcon-search"></text>
            </view>
          </view>
          <view class="nav-view">
            <view class="flex-1">
              <scroll-view :scroll-x="true" :scroll-left="scrollLeft" :enable-flex="true" :scroll-with-animation="true"
                @scroll="onScroll" class="scroll-view">
                <view class="classify-list">
                  <view class="classify-item " :class="{active:!activeClassify}" @click="getGoodsList()">
                    <text>全部</text>
                  </view>
                  <template v-if="isArray(otherClassify)&&otherClassify.length>0">
                    <view class="classify-item"
                      :class="{active:activeClassify===activeFirstLevelClassify.classify_name}"
                      v-if="activeFirstLevelClassify&&activeFirstLevelClassify.classify_name"
                      @click="getGoodsList(activeFirstLevelClassify)">
                      <text>{{activeFirstLevelClassify.classify_name||'-'}}</text>
                    </view>
                    <view class="classify-item child" :class="{active:activeClassify===item.classify_name}"
                      v-for="item in otherClassify" @click="getGoodsList(item)">
                      <text>{{item.classify_name||'-'}}</text>
                    </view>
                  </template>
                  <template v-else>
                    <view class="classify-item" :class="{active:activeClassify===item.classify_name}"
                      v-for="item in classify" @click="getGoodsList(item)">
                      <text>{{item.classify_name||'-'}}</text>
                    </view>
                  </template>
                </view>
              </scroll-view>
            </view>
            <view class="classify-item icon" @click="addScrollLeft">
              <text class="cuIcon-right"></text>
            </view>
            <view class="classify-item margin-right" @click.stop="addClassify">
              <text class="cuIcon-roundaddfill add-icon"></text> 新增分类
            </view>
          </view>
        </view>

        <view class="cash-content-right-list show-y-scroll-bar">
          <goods-item v-for="item in curGoodsList" :is_temporary_goods="item.is_temporary_goods==='是'"
            :imgUrl="item._goods_image" :mode="goodsViewMode" :amount="cartGoodsAmounts[item.goods_no]||0"
            :price="item.sale_price" :stock="item.goods_stock" :sale_state="item.sale_state" :name="item.goods_name"
            @click.native="add2cart(item.goods_barcode,item.is_temporary_goods==='是')">
          </goods-item>
          <view class="goods-item-add flex align-center justify-center text-bold" @click.stop="toAddGoods">
            <text class="cuIcon-add"></text><text class="margin-top">新增商品</text>
          </view>
        </view>
      </view>
    </view>
    <view class="footer-button-block">
      <view class="button-box flex">
        <view class="left flex align-center">
          <button class="bottom-button gray " @click="clearCart(true)" :disabled="billPopup">清空购物车</button>
          <button class="bottom-button" @click="showBillPopup" :disabled="billPopup">
            <text>结算</text>
            <text v-if="billResult._order_amount">:￥{{billResult._order_amount}}</text>
          </button>
        </view>
        <view class="right flex align-center justify-start">
          <button class="bottom-button " @click="putUpOrder" :disabled="billPopup">挂单</button>
          <button class="bottom-button " @click="putInOrder" v-if="putupOrders.length" :disabled="billPopup">
            <text v-if="putupOrders.length">取单</text>
            <text class="badge" v-if="putupOrders.length">
              {{putupOrders.length||''}}
            </text>
          </button>
          <button class="bottom-button" @click="openRemarkPopup">备注</button>
          <button class="bottom-button" @click="openStaffSelector()"> <text
              v-if="curAssistant&&curAssistant.name">营业员：{{curAssistant.name}}</text><text v-else>选择营业员</text>
          </button>
        </view>
      </view>
      <view class="user-msg flex  ">
        <view class="user-name">
          收银员：<text v-if="loginUser&&loginUser.real_name">{{loginUser.real_name}}</text>
        </view>
        <view class="">
          {{currentTime||''}}
        </view>
      </view>
    </view>
    <view class="custom-center-popup">
      <!-- 选择会员 -->
      <u-popup :show="showMemberSelector" :round="20" mode="center" :overlay="true" :closeable="true"
        :closeOnClickOverlay="false" @close="closeMemberPopup">
        <select-member @confirm="closeMemberPopup" :uuid="uuid" :codePayString.sync="codePayString"
          :showWindow.sync="showWindow"></select-member>
      </u-popup>
      <!-- 取单 -->
      <u-popup :show="showPutOrdersPopup" :round="20" mode="center" :overlay="true" :closeable="true"
        :closeOnClickOverlay="false" @close="closePutOrdersPopup">
        <put-orders-content v-if="showPutOrdersPopup" :orders="putupOrders" @cancel="closePutOrdersPopup"
          @confirm="confirmPutInOrder">
        </put-orders-content>
      </u-popup>
      <!-- 编辑选中的购物车商品信息 -->
      <u-popup :show="editCartGoodsPopup" :round="20" mode="center" :overlay="true" :closeable="false"
        :closeOnClickOverlay="false" @close="closeEditCartGoodsPopup" v-if="curEditGoods">
        <edit-goods-content :goods="curEditGoods" @cancel="closeEditCartGoodsPopup" @confirm="confirmChangeCartGoods">
        </edit-goods-content>
      </u-popup>
      <!-- 选择营业员 -->
      <u-popup :show="showSelectStaff" :round="20" mode="center" :overlay="true" :closeable="true"
        :closeOnClickOverlay="false" @close="closePopup('showSelectStaff')">
        <staff-assistant-selector @confirm="closePopup('showSelectStaff')" v-if="showSelectStaff">
        </staff-assistant-selector>
      </u-popup>
      <u-popup :show="showRemark" :round="20" mode="center" :overlay="true" :closeable="true"
        :closeOnClickOverlay="false" @close="closeRemarkPopup">
        <view class="remark-view">
          <view class="popup-title">
            备注
          </view>
          <view class="input-content">
            <uni-easyinput primaryColor="#38C09E" :maxlength="3000" :autoHeight="true" type="textarea"
              v-model="remarkinput" placeholder="" :focus="inputOnFocus" placeholder="输入备注" />
          </view>
          <view class="button-box">
            <button class="button" @click="confirmRemark">确认</button>
          </view>
        </view>
      </u-popup>
      <add-classify ref="addClassify" @success="refreshClassify"></add-classify>
    </view>
  </view>
</template>

<script>
  import {
    getUserMenus
  } from '@/common/api/index.js'
  import {
    getGoods,
    getClassify
  } from '@/common/api/goods.js'
  import {
    queryMembers,
    queryStaff
  } from '@/common/api/member.js'

  import {
    calcFinalPrice
  } from '@/common/utils/goods.js'
  import {
    watchKeydown
  } from '@/common/utils/input.js'

  import goodsItem from '../components/goods-item.nvue'

  import lockscreen from '@/common/mixins/lockscreen.js'

  import checkUpdate from '@/uni_modules/uni-upgrade-center-app/utils/check-update'

  import calcBillResult2 from '@/common/utils/calcBillResult.js'

  let timer = null
  export default {
    components: {
      goodsItem
    },
    mixins: [lockscreen],
    data() {
      return {
        paymentList: [],
        scrollLeft: '',
        old: {
          scrollLeft: 0,
        },
        uuid: '12323',
        showWindow: false,
        codePayString: false,
        orderNo: "",
        pageStatus: "",
        isOnLoad: false,
        currentTime: "",
        searchValue: "", // 扫码输入框绑定值
        goods: [], //商品列表
        activeGoods: '', //当前选中的购物车商品_id
        classify: [], //商品分类列表
        activeFirstLevelClassify: '', //当前一级分类
        activeClassify: '', //当前选中的商品分类
        curPopupService: '', // 当前弹窗服务
        curPopupType: '', //当前弹窗类型 add\update\detail
        isLocalForm: true, // 表单数据只修改本地的 不提交到服务端
        billPopup: false, // 是否显示结算弹窗
        onSearchView: false, //显示商品查找界面
        billData: null, //结算信息
        billResult: {}, //结算信息
        billResult2: {}, //结算信息
        cartInfo: {}, //购物车信息
        cart: [], //购物车商品列表
        showPutOrdersPopup: false, //显示取单弹窗
        editCartGoodsPopup: false, //显示编辑购物车商品的弹框
        showMemberSelector: false, //显示会员选择列表 
        showSelectStaff: false, //显示选择营业员弹窗
        showRemark: false, //显示备注弹框
        remarkinput: "", //备注
        remark: "",
        inputOnFocus: false,
        curGoodsList: [],
        onInput: false,
        orderDetail: [],
        mode: "",
        curPromotion: null,
        curCoupon: null,
        inputCache: "",
        inputString: ""
      }
    },
    watch: {
      cart: {
        deep: true,
        handler(newValue, ) {
          if (Array.isArray(newValue)) {
            this.calcBillResult()
            this.curPromotion = null
            this.curCoupon = null
            if (newValue.length === 0) {
              this.$store.commit('SET_STATE', {
                key: '$curAssistant',
                value: null
              })
            }

          }
        }
      },
      goods: {
        deep: true,
        handler(newValue) {
          if (Array.isArray(newValue) && newValue.length > 0) {
            uni.setStorageSync('goods', newValue)
          }
        }
      }
    },
    computed: {
      enableMemberDiscount() {
        return this.$store?.state?.$integralSetting?.enable_member_discount === '是'
      },
      discountText() {
        if (!this.enableMemberDiscount) {
          return '未启用'
        }
        let text = '-'
        const rate = this.curMemberInfo?.discount_rate
        const discount_type = this.curMemberInfo?.discount_type
        if (discount_type) {
          if (rate && discount_type.indexOf('打折') !== -1 && discount_type.indexOf('优惠价') !== -1) {
            text = `${rate}%或优惠价`
          } else if (discount_type.indexOf('打折') !== -1 && rate) {
            text = `${rate}%`
          } else if (discount_type.indexOf('优惠价') !== -1) {
            text = '优惠价'
          }
        }
        return text
      },
      curClassify() {
        return this.classify.find(item => item.classify_name === this.activeClassify)
      },
      otherClassify() {
        if (this.activeFirstLevelClassify) {
          if (Array.isArray(this.activeFirstLevelClassify?.children) && this.activeFirstLevelClassify?.children
            .length >
            0) {
            return this.activeFirstLevelClassify?.children
          }
        }
      },
      diffGoodsInfo() {
        const diffArr = ['amount', '_finalPrice', 'discount', 'sale_price']
        const result = {
          _updateTime: this.dayjs().format('YYYY-MM-DD HH:mm:ss')
        }
        diffArr.forEach(key => {
          if (this.goods[key] !== this.goodsInfo[key]) {
            result[key] = {
              new: this.goodsInfo[key],
              old: this.goods[key],
            }
          }
        })
        return result
      },
      // 购物车中每个商品的商品数量
      cartGoodsAmounts() {
        let res = {}
        if (Array.isArray(this.cart)) {
          res = this.cart.reduce((pre, cur) => {
            if (!pre[cur.goods_no]) {
              pre[cur.goods_no] = 0
            }
            pre[cur.goods_no] += Number(cur.amount);
            return pre
          }, {})
        }
        return res
      },
      // 所有购物车中的商品的商品编号
      cartGoodsNos() {
        return Array.isArray(this.cart) ? this.cart.map(item => item.goods_no) : []
      },
      putupOrders() {
        const putupOrders = this.$store?.state?.$putupOrders || []
        if (this.tenantInfo.tenant_no) {
          return putupOrders.filter(item => item.storeNo === this.tenantInfo.tenant_no)
        } else {
          return []
        }
      },
      goodsList() {
        return this.$store?.state?.$goodsList || []
      },
      sumDiscounts() {
        return Number(-(this.billResult?.discount_amount || 0))
      },
      resultPrice() {
        let member_level_no = null
        if (this.curMemberInfo?.member_level_no) {
          member_level_no = this.curMemberInfo['member_level_no']
        }
        let result = this.cart.reduce((res, cur) => {
          let price = cur.sale_price
          if (member_level_no && cur.allow_member_price == '允许') {
            if (cur?._goods_member && cur?._goods_member[member_level_no] && cur?._goods_member[
                member_level_no]
              ?.member_discount_amount) {
              price = cur?._goods_member[member_level_no]?.member_discount_amount
            }
          }
          res += price * cur.amount
          return Number(res.toFixed(2))
        }, 0)
        return result
      },
      sumPrice() {
        return this.billResult.order_total_amount
      },
      sumAmount() {
        const result = this.cart.reduce((res, cur) => {
          res += Number(cur.amount);
          return res
        }, 0)
        return Number(result.toFixed(2))
      },
      // 当前正在编辑的商品
      curEditGoods(e) {
        return this.cart.find(item => item._id === this.activeGoods)
      },
    },
    methods: {
      async getPayWayList() {
        const url = `/retail/select/srvretail_pay_set_select?srvretail_pay_set_select`;
        const req = {
          "serviceName": "srvretail_pay_set_select",
          "colNames": ["*"],
        };
        uni.showLoading({
          title: "加载中"
        })
        const res = await this.$http.post(url, req)
        if (Array.isArray(res?.data?.data)) {
          this.paymentList = res?.data?.data.map((item) => {
            let timeUnique = `${Math.random()*1000}${new Date().getTime()}`;
            item.unique = timeUnique;
            if (item.pay_status == '启用') {
              item.disabled = false;
            } else {
              item.disabled = true;
            }
            if (item.pay_type == '会员卡') {
              item.label = '会员支付';
              item.image = '/static/icons/hyzf.png';
            } else if (item.pay_type == '现金') {
              item.label = '现金支付';
              item.image = '/static/icons/xjzf.png';
            } else if (item.pay_type == '支付宝') {
              item.label = '支付宝支付';
              item.image = '/static/icons/zfb.png';
            } else if (item.pay_type == '微信') {
              item.label = '微信支付';
              item.image = '/static/icons/wxzf.png';
            } else if (item.pay_type == '积分') {
              item.label = '积分支付';
              item.image = '/static/icons/wxzf.png';
            } else if (item.pay_type == '银联支付') {
              item.label = '银联支付';
              item.image = '/static/icons/hbzf.png';
            } else if (item.pay_type == '和包') {
              item.label = '和包支付';
              item.image = '/static/icons/hbzf.png';
            } else if (item.pay_type == '数字人民币') {
              item.label = '数字人民币支付';
              item.image = '/static/icons/hbzf.png';
            }
            return {
              ...item
            }
          })
          if (this.mode === '退货') {
            this.paymentList = this.paymentList.filter(item => ['会员支付', '现金支付'].includes(item.label))
          }
        }
        uni.hideLoading()
      },
      exitRefundMode() {
        this.mode = ''
      },
      changeNumber(e) {
        console.log(e);
        const {
          value,
          name
        } = e
        let index = this.cart.findIndex(item => item._id && item._id === name)
        if (index > -1) {
          let item = this.cart[index]
          item.amount = Number(value)
          this.$set(this.cart, index, item)
          this.calcBillResult()
        }
      },
      calcBillResult(type = 'inCart') {
        let vipPriceList = this.$store?.state?.$goodsVipPriceList
        const activityList = this.$store?.state?.$activityList
        const integralSetting = this.$store?.state?.$integralSetting
        // this.billResult = calcBillResult(JSON.parse(JSON.stringify(this.cart)), type, 0, 0, this
        //   .billResult)

        if (Array.isArray(vipPriceList) && Array.isArray(this.cart)) {
          vipPriceList = vipPriceList.filter(item => this.cart.find(e => e.goods_no === item.goods_no))
        }

        this.billResult = calcBillResult2(JSON.parse(JSON.stringify(this.cart)), this.curMemberInfo, {
            type: type, // vip|discount|change|free|coupon 会员价、整单折扣、整单改价、免单、优惠券
            discountAmount: 0, // 整单减免金额/整单折扣比例（0-100）
            subtractPrice: 0, //抹零金额
            vipPayAmount: 0, //会员余额支付金额
            integralPayAmount: 0, //积分抵扣金额
          }, {
            member_coupon_no: "", // 会员优惠券编号
            use_threshold: "", // 使用门槛 无门槛|最低消费
            coupon_discount: 0 //优惠券减免金额
          },
          vipPriceList,
          activityList,
          integralSetting
        )
        this.orderDetail = this.billResult?.order_detail || []
      },
      onScroll(e) {
        this.old.scrollLeft = e?.detail?.scrollLeft
      },
      addScrollLeft() {
        this.scrollLeft = this.old.scrollLeft
        this.$nextTick(() => {
          this.scrollLeft += 100
        })
      },
      changeCartInfo(e) {
        this.cartInfo = e
        this.cart = e.cart
        // let type = this.cartInfo.cart.some(item => Array.isArray(item?._activite) && item._activite.length > 0) ? '' :'vip'
        let type = ''
        // if (this.curMemberInfo?.id) {
        //   type = 'vip'
        // }
        this.calcBillResult(type)
        // this.billResult = calcBillResult(this.cart, type, 0, 0, this.billResult)
        // this.orderDetail = this.billResult?.order_detail || []
      },
      isActivitesGoods(item) {
        return item._buy_full_discount || item._buy_discount
        // return item?._activite_info?.goods_no;

        // if (Array.isArray(item?._activite) && item?._activite.length > 0) {
        //   if (item._activite.find(e => e?.participants === '所有用户')) {
        //     return true
        //   }
        //   if (item._activite.find(e => e?.member_level_name && e?.participants === '指定会员等级' &&
        //       this.curMemberInfo && this.curMemberInfo['member_level_no'] === e?.member_level_name)) {
        //     return true
        //   }
        // }

        return false
      },
      getSumPrice(item) {
        if (item.ctual_amount === 0) {
          return '0'
        }
        if (item.ctual_amount) {
          return item.ctual_amount
        }
        // let price = item.sale_price
        // let amount = item.amount
        // const member_level_no = this.curMemberInfo?.member_level_no
        // if (this.enableMemberDiscount && member_level_no && item.allow_member_price == '允许') {
        //   if (item?._goods_member && item?._goods_member[member_level_no] && item?._goods_member[member_level_no]
        //     ?.member_discount_amount) {
        //     price = item?._goods_member[member_level_no]?.member_discount_amount
        //   } else if (item?._goods_member && item?._goods_member[member_level_no] && item?._goods_member[
        //       member_level_no]
        //     ?.discount_rate) {
        //     price = item?._goods_member[member_level_no]?.discount_rate * price / 100
        //   }
        // }
        // return Number((price * amount).toFixed(2))
      },
      changeSearchGoodsView() {
        this.onSearchView = !this.onSearchView
      },
      //确认备注内容
      confirmRemark() {
        // if (!this.remarkinput) {
        //   uni.showToast({
        //     title: '请输入内容',
        //     icon: 'none'
        //   })
        //   return
        // }
        this.remark = this.remarkinput || ""
        if (this.remarkinput) {
          uni.showToast({
            title: '备注添加成功',
            icon: 'none'
          })
        } else {
          uni.showToast({
            title: '备注已取消',
            icon: 'none'
          })
        }

        this.showRemark = false
      },
      //打开备注弹框
      openRemarkPopup() {
        if (this.cart.length > 0) {
          this.showRemark = true
          // setTimeout(()=>{
          // this.inputOnFocus = true
          // },300)
        } else {
          uni.showToast({
            title: '请先选择商品',
            icon: 'none'
          })
        }
      },
      //关闭备注弹框
      closeRemarkPopup() {
        if (this.remark) {
          this.remarkinput = this.remark
        }
        this.showRemark = false
      },
      setBillResult(e, promotion, curCoupon) {
        this.billResult = e
        this.orderDetail = this.billResult?.order_detail || []
        this.curPromotion = promotion || null
        console.log('setBillResult', curCoupon);
        this.curCoupon = curCoupon || null
      },
      // 登出当前会员
      exitMember() {
        this.$store.commit('SET_STATE', {
          key: '$curMember',
          value: null
        })
        this.calcBillResult()
      },
      // 选择会员弹框
      showMemberSelectorPopup() {
        this.removeKeydown()
        this.showMemberSelector = true
      },

      closeMemberPopup() {
        this.registerKeydow()
        this.showMemberSelector = false
        this.calcBillResult()
      },
      // 编辑购物车中的商品信息
      confirmChangeCartGoods(e) {
        if (e?._id) {
          const index = this.cart.findIndex(item => item._id === e._id)
          if (index > -1) {
            let goods = this.cart[index]
            goods = {
              ...goods,
              ...e,
              updateRecord: [...goods.updateRecord || [], e.diff]
            }
            if (goods.goods_stock && goods.amount && goods.amount > goods.goods_stock) {
              goods.amount = goods.goods_stock
              uni.showToast({
                title: `最多只能购买${goods.goods_stock}件`,
                icon: 'none'
              })
            }
            goods.hasChanged = true;
            console.log(goods);
            goods = calcFinalPrice(goods)
            this.cart.splice(index, 1, goods)
            console.log(goods);
            this.cartInfo.cart = this.cart
          }
        }
        this.calcBillResult()
        this.editCartGoodsPopup = false
      },
      openPopup(e) {
        this[e] = true
      },
      /**
       * @param { String } e - 弹窗名
       */
      closePopup(e) {
        this[e] = false
      },
      // 打开选择营业员弹窗
      openStaffSelector() {
        if (this.cart.length > 0) {
          this.showSelectStaff = true
        } else {
          uni.showToast({
            title: '请添加商品',
            icon: 'none'
          })
          // uni.showModal({
          //   title: '提示',
          //   content: '请添加商品',
          //   showCancel: false,
          //   confirmText: '知道了'
          // })
        }
      },
      // 关闭选择营业员弹窗
      closeSelectStaffPopup() {
        this.showSelectStaff = false
      },
      // 关闭修改购物车商品信息弹窗
      closeEditCartGoodsPopup() {
        if (this.curEditGoods.is_temporary_goods === '是') {
          this.cart = this.cart.filter((item) => item._id !== this.activeGoods)
        }
        this.editCartGoodsPopup = false
        this.activeGoods = ''
      },
      // 关闭取单弹窗
      closePutOrdersPopup() {
        this.showPutOrdersPopup = false
      },
      /**
       * @description 通用表单弹窗提交后的回调函数
       * @param {object} data 提交的数据
       * @param {string} key  表单key值，区分当前提交的是什么表单
       */
      onFormPopuoSubmit(data, key) {
        console.log(data, key);
        // // 编辑购物车中的商品信息
        // if (key === 'update-cart-goods') {
        //   this.changeCartData(data)
        // }
        // 添加分类
        if (key === 'add-classify') {
          getClassify().then(data => {
            if (Array.isArray(data)) {
              this.classify = data
            }
          })
        }
        // 添加商品
        if (key === 'add-goods') {
          this.getGoodsList()
        }
        this.resetPopupParams()
      },
      /**
       * @description 设置表单弹窗参数
       * @param {object} e { service:表单服务,'type':表单类型-add|update|delete ,'isLocal':是否仅本地操作,默认为true} 
       */
      setPopupParams(e = {
        service: "",
        type: "",
        isLocal: true
      }) {
        const {
          service,
          type,
          isLocal
        } = e
        this.isLocalForm = isLocal
        this.curPopupService = service
        this.curPopupType = type
      },
      // 重置表单弹窗参数
      resetPopupParams() {
        this.isLocalForm = true
        this.curPopupService = ''
        this.curPopupType = ''
      },
      // 显示购物车商品编辑弹窗
      showEditPopup(_id) {
        this.editCartGoodsPopup = true
      },
      // 关闭结算弹窗
      closeBillPopup() {
        this.billPopup = false
        this.calcBillResult()
      },
      // 显示结算弹窗
      showBillPopup() {
        if (!this.menuAuth['bxretail_aio_cashier']) {
          uni.showToast({
            title: '当前帐号没有收银权限！',
            icon: 'none'
          })
          return
        }
        if (this.cart && this.cart.length === 0 || !this.cart) {
          uni.showToast({
            title: '购物车中还没有商品哦~',
            icon: 'none'
          })
          return
        }

        this.$nextTick(_ => {
          this.billPopup = true
        })

      },
      toAddGoods() {
        let url = `/pages/main/addGoods/addGoods`
        // #ifdef H5
        // let url = `/pages/public/form/form?serviceName=srvretail_goods_info_add&type=add`
        // #endif
        // const url = `/pages/public/form/form?serviceName=srvretail_goods_info_add&type=add`
        uni.navigateTo({
          url
        })
      },
      // 展示取单弹窗
      putInOrder() {
        this.showPutOrdersPopup = true
      },
      // 取单
      confirmPutInOrder(id) {
        let orders = this.putupOrders
        let index = orders.findIndex(item => item._id && item._id === id)
        if (index > -1) {
          let data = orders[index]
          let list = data?.cart;
          let cart = []
          if (Array.isArray(list) && list.length > 0) {
            list.forEach(item => {
              let goods = this.goodsList.find(e => e.goods_barcode === item.goods_barcode)
              if (goods?.goods_barcode) {
                if (item.amount > goods.goods_stock) {
                  item.amount = goods.goods_stock
                }
              }
              if (goods.goods_stock > 0) {
                cart.push(item)
              } else {
                uni.showModal({
                  title: '提示',
                  content: '部分商品库存为0,将自动从购物车中删除',
                  showCancel: false
                })
              }
              data.cart = cart
              // this.add2cart(item.goods_barcode,item.is_temporary_goods==='是',item.amount)
            })
          }
          this.cartInfo = data
          // this.cartInfo = orders[index]
          this.cart = this.cartInfo.cart
          orders.splice(index, 1)
          this.$store.commit('SET_PUTUP_ORDERS', orders)
          this.showPutOrdersPopup = false
          if (this.cartInfo.curAssistant) {
            this.$store.commit('SET_STATE', {
              key: '$curAssistant',
              value: this.cartInfo.curAssistant
            })
          }
          uni.showToast({
            title: '取单成功',
            icon: 'none'
          })
        }
      },
      // 点击挂单按钮
      putUpOrder() {
        if (this.cart.length > 0) {
          // 挂单时间
          this.cartInfo.curAssistant = this.deepClone(this.curAssistant) //营业员
          this.cartInfo.remarkinput = this.remarkinput
          this.cartInfo._putInTime = this.dayjs().format("YYYY-MM-DD HH:mm:ss")
          this.cartInfo._goods_names = this.cart.map(item => item.goods_name).toString()
          this.cartInfo.storeNo = this.tenantInfo.tenant_no
          let putupOrders = this.putupOrders
          putupOrders.unshift(this.deepClone(this.cartInfo))
          this.$store.commit('SET_PUTUP_ORDERS', putupOrders)
          this.clearCart()
          // 清除已选营业员数据
          this.$store.commit('SET_STATE', {
            key: '$curAssistant',
            value: null
          })
          uni.showToast({
            title: '挂单成功',
            icon: 'none'
          })
        } else {
          uni.showModal({
            title: '提示',
            content: '购物车中还没有商品哦~',
            showCancel: false,
          })
        }
      },
      // 选中购物车中的商品
      onSelect(e) {
        this.activeGoods = e._id
        this.showEditPopup(e._id)
      },
      successPay() {
        this.billPopup = false
        this.billData = null
        this.remarkinput = ''
        this.remark = ''
        // 清除已选营业员数据
        this.$store.commit('SET_STATE', {
          key: '$curAssistant',
          value: null
        })
        this.$store.commit('SET_STATE', {
          key: '$curMember',
          value: null
        })
        this.clearCart()
        this.getGoodsList()
        this.remarkinput = ''
      },
      /**
       * @description 清空购物车
       * @param {boolean} confirm - 清空前是否弹出确认框,默认为false
       */
      async clearCart(confirm = false) {
        if (this.cart.length > 0) {
          if (confirm) {
            let res = await new Promise((resolve) => {
              uni.showModal({
                title: '提示',
                content: '是否清空购物车？',
                success: (res) => {
                  resolve(res?.confirm)
                }
              })
            })
            if (!res) {
              return
            }
          }
          this.cart.splice(0, this.cart.length)
          this.cartInfo = {}
          this.billResult._order_amount = ''
        } else {
          if (confirm) {
            uni.showToast({
              title: '购物车中还没有商品哦~',
              icon: 'none'
            })
            // uni.showModal({
            //   title: '提示',
            //   content: '购物车中还没有商品哦~',
            //   showCancel: false,
            // })
          }
        }
      },
      // 从购物车中移除此商品
      removeGoodsFromCart(id) {
        uni.showModal({
          title: '提示',
          content: '从购物车中移除此商品？',
          success: (res) => {
            if (res.confirm) {
              let index = this.cart.findIndex(item => item._id === id)
              if (index > -1) {
                this.cart.splice(index, 1)
              }
            }
          }
        })
      },
      add2cart(barCode, is_temporary_goods, amount = 1) {
        this.onInput = false
        console.log('add2cart', this.searchValue, barCode);
        // 添加商品到购物车
        if (this.cart.length === 0) {
          this.cartInfo = {
            number: `${this.dayjs().format("YYYYMMDD")}0${this.putupOrders.length + 1}`, //编号
            _id: `cartInfo_${new Date().getTime()}`
          }
        } else {
          let hasTemporaryGoods = this.cart.find(item => item.is_temporary_goods === '是')
          if (!is_temporary_goods && hasTemporaryGoods) {
            // uni.showToast({
            //   title:'普通商品不能和临时商品一起结算',
            //   icon:"none"
            // })
            // return
          } else if (is_temporary_goods && !hasTemporaryGoods) {
            // uni.showToast({
            //   title:'临时商品不能和普通商品一起结算',
            //   icon:"none"
            // })
            // return
          }
        }
        if (isNaN(Number(barCode))) {
          uni.showToast({
            title: '商品数据有误，条码非数字！',
            duration: 3000,
            icon: 'none'
          })
          return
        }
        if (barCode && !isNaN(Number(barCode))) {
          console.log(barCode);
          let goods = this.goodsList.find(item => item.goods_barcode === barCode)
          if (goods?.id) {
            goods = this.deepClone(goods)
            console.log(goods);
            if (goods.goods_stock === 0 || goods.sale_state === '售罄' || goods.goods_stock <= this.cartGoodsAmounts[goods
                .goods_no]) {
              uni.showToast({
                title: '库存不足,不能继续添加!',
                icon: 'none'
              })
              return
            }
            let obj = {
              ...goods,
              _origin_price: goods._origin_price || goods.sale_price,
              amount: amount,
              _id: 'cartItem_' + new Date().getTime()
            }

            let index = this.cart.findIndex(item => item.goods_no && item
              .goods_no === goods
              .goods_no)
            if (index !== -1 && is_temporary_goods !== true) {
              // 购物车中已有此商品而且未经过改动
              obj = {
                ...this.cart[index]
              }
              obj.amount++
              obj = calcFinalPrice(obj)
              this.cart.splice(index, 1, obj)
            } else {
              if (is_temporary_goods === true) {
                let amount = this.cart.filter(item => item.is_temporary_goods === '是').length
                obj.goods_name += amount + 1
              }
              obj = calcFinalPrice(obj)
              this.cart.push(obj)
            }
            if (is_temporary_goods === true) {
              this.onSelect(obj)
            }
            this.$nextTick(function() {
              this.activeGoods = obj._id
            });
          } else {
            uni.showToast({
              title: '未找到此条码对应的商品',
              duration: 3000,
              icon: 'none'
            })
          }
        }
        this.cartInfo.cart = this.cart
        setTimeout(() => {
          this.searchValue = ''
        }, 200)
      },
      // 跳转到新增分类页面
      addClassify() {
        this.$refs.addClassify?.open()
      },
      getGoodsList(data = {}) {
        const {
          classify_name,
          path
        } = data
        if (data && data?.parent_no === null) {
          this.activeFirstLevelClassify = data
        }
        let cond = []
        this.activeClassify = classify_name || ''
        if (classify_name && path) {
          let list = this.deepClone(this.goodsList)
          this.curGoodsList = list.filter(item => (item.classify_path && item.classify_path.indexOf(path) === 0))
          return
        } else {
          this.activeFirstLevelClassify = null
          this.curGoodsList = this.goodsList
        }
        if (this.searchValue) {
          cond.push({
            colName: 'goods_name',
            ruleType: 'like',
            value: this.searchValue
          })
          this.searchValue = ''
        }
        getGoods(cond).then(res => {
          if (res.data) {
            const data = res.data.map(item => {
              if (item.goods_image && this.goodsViewMode !== '文字') {
                item._goods_image = this.getImagePath(item.goods_image)
                this.url2Base64(item._goods_image).then(url => {
                  item._base_64_image = url
                })
              }
              return item
            })
            if (Array.isArray(cond) && cond.length > 0) {
              // 有过滤条件 不改变原商品列表
            } else {
              // 重新查找商品列表
              this.$store.commit('SET_GOODS_LIST', data)
            }
            this.curGoodsList = data
          }
          this.isOnLoad = true
        })
      },
      async getMemeberSetup() {
        const service = 'srvretail_member_setup_select'
        const url = `/retail/select/${service}`
        const req = {
          "serviceName": service,
          "condition": [{
            "colName": "store_no",
            "ruleType": "eq",
            "value": this.tenantInfo?.tenant_no
          }],
          "colNames": ["store_no", "member_setup_no", "enable_member", "enable_member_levle",
            "member_valid",
            "start_time", "end_time", "id"
          ]
        }
        const res = await this.$http.post(url, req)
        if (res?.data?.state === 'SUCCESS') {
          if (res.data.data.length > 0) {
            this.$store.commit("SET_STATE", {
              key: '$memberSetup',
              value: res.data.data[0],
              persistence: true
            })
          }
        }
      },
      refreshClassify() {
        this.getGoodsList()
        getClassify().then(data => {
          if (Array.isArray(data)) {
            this.$store.commit('SET_STATE', {
              key: '$classifyList',
              value: data,
              persistence: true
            })
            this.classify = data
          }
        })
      },
      async initData() {
        uni.showLoading({
          title: '加载中...',
          mask: true
        })
        setTimeout(() => {
          uni.hideLoading()
        }, 10 * 1000)
        await getUserMenus()
        uni.hideLoading()

        queryStaff()
        queryMembers()
        if (Array.isArray(this.$store?.state?.$classifyList) && this.$store?.state?.$classifyList.length > 0) {
          this.classify = this.$store?.state?.$classifyList
        }
        this.refreshClassify()
        this.getMemeberSetup()
      },
      onWatchKeydown(e) {
        watchKeydown(e, 'cash').then(str => {
          if (this.showWindow || this.billPopup) {
            this.codePayString = str;
            this.uuid = this.getUuid();
          } else {
            if (!this.showRemark && !this.showSelectStaff && !this.editCartGoodsPopup && !this
              .showPutOrdersPopup &&
              !this.showMemberSelector && !this.onSearchView && !this.billPopup && this
              .pageStatus !== 'hide') {
              if (this.onInput && !this.onInput) {
                this.searchValue = str || ''
              }
              this.add2cart(str)
              setTimeout(() => {
                this.searchValue = ''
              }, 3000)
            }
          }
        })
      },
      removeKeydown() {
        // 移除键盘按下监听事件
        // #ifdef APP
        plus.key.removeEventListener('keydown', this.onWatchKeydown)
        // #endif
        // #ifdef H5
        window.document.removeEventListener('keydown', this.onWatchKeydown)
        // #endif
      },
      registerKeydow() {
        // #ifdef APP
        // plus.key.addEventListener('keyup', (e) => {
        //   console.log(JSON.stringify(e));
        //   uni.showModal({
        //     title: 'keydown',
        //     content: JSON.stringify(e.keyCode)
        //   })
        // })
        // plus.globalEvent.addEventListener('keydown', function(e) {
        //   console.log('keydownkeydown,', e);
        // });
        // 注册键盘按下监听事件 监听码枪输入
        plus.key.addEventListener('keydown', this.onWatchKeydown)
        // #endif
        // #ifdef H5
        window.document.addEventListener('keydown', this.onWatchKeydown)
        // #endif
      },
    },
    onUnload() {
      // 移除键盘按下监听事件
      this.removeKeydown()
    },
    onLoad(option) {
      this.registerKeydow()
      if (option.orderNo) {
        this.orderNo = option.orderNo
        this.billPopup = true
      }
      if (option.mode) {
        this.mode = option.mode
      }
      if (option.showPutOrder) {
        this.showPutOrdersPopup = true
      }
      this.initData()
      timer = setInterval(() => {
        this.currentTime = this.dayjs(new Date()).format("YYYY-MM-DD HH:mm")
      }, 1000)
      uni.$on('dataChange', () => {
        this.initData()
      })
      this.getPayWayList()
      checkUpdate()
    },
    onHide() {
      this.pageStatus = 'hide'
      // clearInterval(timer)
    },
    updated() {
      // #ifdef APP
      // 隐藏系统虚拟按键（导航栏）
      // void plus.navigator.hideSystemNavigation();
      // 设置应用全屏显示
      // plus.navigator.setFullscreen(true);
      // #endif
      // this.waitLockScreen()
    },
    beforeDestroy() {
      uni.$off('dataChange')
      clearInterval(timer)
    },
    onShow() {
      this.pageStatus = 'show'
      if (this.isOnLoad === true) {
        // this.initData()
      }
    },
  }
</script>

<style lang="scss">
  .cash-main {
    height: calc(100vh - var(--window-top) - var(--window-bottom));
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;

    .public-header {
      margin-bottom: 0 !important;
    }

    .cash-content {
      width: 100vw;
      height: calc(100vh - var(--window-top) - var(--window-bottom) - 20vh);
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-top: 1rem;

      .cash-content-left {
        width: 50rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-bottom: 2rem;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          width: 100%;
          height: 100%;
          left: -100%;
          background-color: rgba(0, 0, 0, 0.2);
          transition: all cubic-bezier(0.215, 0.610, 0.355, 1) .5s;
        }

        &.disabled {
          pointer-events: none;
          cursor: no-drop;

          &::after {
            content: '';
            left: 0;
            background-color: rgba(0, 0, 0, 0.2);
          }
        }

        .cash-content-left-header {
          background-color: #fff;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 1.8rem 2rem;

          .vip-card {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 46.4rem;
            height: 8.8rem;
            padding: 0 2rem;
            color: #634B2E;
            border-radius: 1rem;
            background: #fdefdb;
            background: linear-gradient(217.39deg, #F5B45F4C 0%, #FCDDB14C 54.86%, #FADBAF4C 80.56%, #F7C57E4C 100%);

            .vip-card-left {
              display: flex;
              align-items: center;
              font-size: $retail-font-size-sm;

              .vip-icon {
                width: 3.8rem;
                height: 3.8rem;
                padding: .5rem;
                margin-right: 2rem;
              }

              &.flex-column {
                flex-direction: column;
                flex: 1;
                margin-right: 4rem;

                .vip-card-left-top {
                  width: 100%;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                }
              }

              &-bottom {
                line-height: 3rem;
                width: 100%;
                display: flex;
                font-size: 1.6rem;
                justify-content: space-between;
              }
            }

            .vip-card-right {
              display: flex;
              align-items: center;
              font-size: $retail-font-size-xs;

              .icon {
                width: 2.8rem;
                height: 2.8rem;
              }
            }

          }
        }

        .cash-content-left-list {
          overflow-y: hidden;
          flex: 1;

          .data-empty {
            height: 100%;
            background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .scroll-view {
            flex: 1;
            height: 100%;
            background-color: #fff;
            padding-bottom: 2rem;
          }

          .cart-item {
            min-height: 10rem;
            font-size: $retail-font-size-sm;
            padding: 1rem;
            border-right: 5px solid transparent;

            &.active {
              border-color: $retail-color-primary;
              background-color: #F5F5F5;
            }

            .goods-index {
              height: 100%;
            }

            .badge {
              display: inline-block;
              background-color: #fff;
              border-radius: 1rem;
              width: 3rem;
              border: 1px solid #D5D5D5;
              font-size: $retail-font-size-xs;
              text-align: center;
              margin-right: 1rem;
              min-width: 3rem;
            }

            .goods-info {
              flex: 1;
              height: 100%;
              flex-direction: column;
              font-size: 2.4rem;

              &-name {
                font-size: 2.4rem;
                flex: 1;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }

              .goods-info-number {
                ::v-deep .u-number-box {
                  input {
                    min-height: 0;
                  }
                }
              }

              .item {
                width: 100%;
                margin-bottom: 1rem;
                padding: .2rem;
                max-width: 37rem;
              }

              .bottom {
                margin-bottom: 0;
                color: $retail-color-primary;
                font-size: $retail-font-size-xs;
                display: flex;
                align-items: center;

                .state {
                  display: inline-block;
                  border: 1px solid #FF5733;
                  border-radius: .5rem;
                  color: #FF5733;
                  min-width: 6rem;
                  line-height: 3rem;
                  text-align: center;
                }
              }
            }

            .delete-icon {
              height: 100%;
              align-items: center;
              margin-left: 1rem;

              &:active {
                opacity: 0.7;
                background-color: #ccc;
                border-radius: .5rem;
              }
            }
          }
        }

        .cash-content-left-footer {
          background-color: #fff;
          height: 9rem;
          width: calc(100%);
          display: flex;
          justify-content: space-around;
          align-items: center;
          border-top: 1px dashed #999;

          .sum-item {
            display: flex;
            flex-direction: column;
            align-items: center;

            .number {
              color: #FF5733;
              font-size: $retail-font-size-sm;
              line-height: 3.5rem;
              font-weight: 700;
            }

            .label {
              font-size: $retail-font-size-xs;
            }
          }

        }
      }

      .cash-content-right {
        height: calc(100% - 2rem);
        width: calc(100vw - 50rem);
        background-color: #f2f2f2;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;

        .cash-content-right-header {
          display: flex;
          flex-direction: column;
          width: 100%;
          min-height: 13vh;
          /* #ifdef APP-PLUS */
          min-height: 15vh;
          /* #endif */

          .search-view {
            display: flex;
            position: relative;
            padding: 0 2rem;
            height: 7vh;
            margin-bottom: 1rem;

            .input-shadow {
              position: fixed;
              top: 0;
              left: 0;
              width: 100vw;
              height: 100vh;
              background-color: rgba(0, 0, 0, 0.01);
              z-index: 3;
            }

            .bar-code-input-area {
              // margin: 0 1rem;
              border-radius: 1rem;
              height: 100%;
              padding: 1.6rem 2.4rem;
              flex: 1;
              position: relative;
              display: flex;
              align-items: center;
              background-color: #fff;
              border: 1px solid #fff;
              position: relative;
              z-index: 5;

              &.active {
                &::after {
                  content: '';
                  position: absolute;
                  left: 3rem;
                  height: 50%;
                  width: 1px;
                  background-color: #333;
                  animation: cursorImg 1s infinite steps(1, start);

                  @keyframes cursorImg {

                    0%,
                    100% {
                      opacity: 0;
                    }

                    50% {
                      opacity: 1;
                    }
                  }
                }
              }

              .input-bar {
                flex: 1;
                font-size: 2.4rem;
                z-index: 5;

              }

              input {
                flex: 1;
                font-size: 2.4rem
              }

              .bar-code-icon {
                width: 3.2rem;
                height: 3.2rem;
              }
            }

            .bar-code-placeholder {
              color: #D5D5D5;
              font-size: 2rem;
            }

            .right-button {
              font-size: 3rem;
              width: 8.8rem;
              // height: 6rem;
              text-align: center;
              // line-height: 6rem;
              border-radius: 1rem;
              background-color: #fff;
              margin-left: 2rem;
              font-weight: 700;
              display: flex;
              align-items: center;
              justify-content: center;

              &.text-button {
                font-size: 2.3rem;
                font-weight: 500;
                overflow: hidden;
                background-color: #E5E5E5;
                border: none;

                &::after {
                  content: none;
                }
              }
            }
          }

          .nav-view {
            padding: 0 2rem;
            display: flex;
            justify-content: space-between;
            width: 100%;

            .scroll-view {
              width: 100%;
            }

            .classify-list {
              display: flex;
              // flex-wrap: wrap;
              // max-width: 110rem;
              // width: 100%;
              // overflow-x: scroll;
              // overflow-y: hidden;
            }

            .flex-1 {
              overflow: hidden;
            }

            .classify-item {
              border: none;
              outline: none;
              padding: 1rem 0;
              font-weight: bold;

              &.child {
                // background-color: #E5E5E5;
                // border-color: #E5E5E5;
                color: $retail-color-primary;
                font-weight: normal;
              }

              &.icon {
                min-width: 1rem;
                padding: 0 1rem;
                background-color: #E5E5E5;
                border-color: #E5E5E5;
              }

              &:active {
                transform: translate(1px, 1px);
              }

              &::after {
                border: none;
              }

              min-width: 15rem;
              height: 5.5rem;
              line-height: 5.5rem;
              text-align: center;
              border-radius: 1rem;
              background-color: #fff;
              border: 1px solid #fff;
              font-size: $retail-font-size-sm;
              color: $retail-font-color-base;
              margin-right: 1rem;
              padding: 0 2rem;

              &:last-child {
                margin-right: 0;
              }

              &.active {
                border-color: $retail-color-primary;
                background: #DEF2EA;
                color: $retail-color-primary;
              }
            }
          }
        }

        .cash-content-right-list {

          max-height: 65vh;
          margin: 0 2rem;
          // flex: 1;
          display: flex;
          flex-wrap: wrap;
          overflow-y: scroll;
          align-items: flex-start;
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          // grid-gap: 1rem;
          // padding: 2rem 0;

          @media screen and(min-width:2100px) {
            grid-template-columns: repeat(6, 1fr);
          }

          .goods-item-add {
            width: 100%;
            height: 20rem;
            margin-top: 1rem;
            margin-right: 1rem;
            background-color: #fff;
            border-radius: 1rem;
            display: flex;
            flex-direction: column;
            font-size: $retail-font-size-sm;
          }
        }
      }
    }

    .footer-button-block {
      display: block;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      background-color: #fff;
      height: 11rem;

      .button-box {
        display: flex;
        flex: 1;

        .bottom-button {
          background-color: $retail-color-primary;
          font-size: $retail-font-size-sm;
          padding: 1.9rem 2.2rem;
          line-height: 1;
          color: #fff;
          position: relative;
          overflow: visible;
          min-width: 20rem;
          margin: 0;

          &[disabled] {
            opacity: 0.5;
          }

          .badge {
            font-size: $retail-font-size-xs;
            position: absolute;
            right: 0;
            top: -1rem;
            min-width: 3rem;
            text-align: center;
            padding: .5rem .8rem;
            background-color: #FF5733FF;
            transform: translateX(50%);
            border-radius: 2rem 2rem 2rem 0;
            z-index: 2;
          }

          &.gray {
            color: #333;
            background-color: $retail-color-cancel;
          }
        }

        .left {
          width: 50rem;
          padding: 1.8rem 2.6rem;
          display: flex;
          justify-content: space-around;
        }

        .right {
          padding: 0 2rem;

          .bottom-button {
            min-width: 20rem;
            margin-right: 3rem;
          }
        }
      }


      .user-msg {
        font-size: $retail-font-size-base;
        text-align: right;
        flex-direction: column;
        justify-content: center;
        padding: 0 2rem;

        .user-name {
          font-size: $retail-font-size-sm;
          padding-bottom: 1rem;
        }
      }
    }
  }

  .popup-content {
    width: 40vw;
    // width: calc(100vw - 50rem);
    height: 100%;
  }

  .remark-view {
    width: calc(100vw - 100rem);
    height: 100%;
    padding: 2rem;
    display: flex;
    flex-direction: column;

    .popup-title {
      padding-bottom: 1rem;
    }

    .button-box {
      width: 100%;
      justify-content: center;
      flex: 1;
      display: flex;
      align-items: flex-end;
      padding: 2rem 2rem 0;

      .button {
        width: 40rem;
        height: 8rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: $retail-font-size-sm;
      }
    }

    .input-content {
      border-radius: 1rem;
      // border: 1px solid $retail-color-primary;
      width: 100%;
      height: 50rem;
      font-size: $retail-font-size-sm;
      padding: 2rem;
    }
  }
</style>
